<template>
    <div>

        <div @click="visible = true" class="select-btn">
            <span v-if="lng">{{ lng }} ; {{ lat }}</span>
        </div>
        <a-modal :open="visible" title="选择坐标点" :destroyOnClose="true" :width="1000" @ok="handleOk"
            @cancel="handleClose">

            <div v-if="lnglat" class="point-div">已选择坐标，
                经度：<span class="point-text">{{ lnglat.lng }}</span>；
                纬度：<span class="point-text">{{ lnglat.lat }}</span>；
            </div>

            <Amap ref="amap" @complete="complete" @click="handleClick" style="height: 500px;"></Amap>
        </a-modal>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import Amap from '@/components/Amap/Amap.vue'
import location from '@/assets/map/location.png'
import { Form } from "ant-design-vue";
import type { Base } from '@/types/Base';
import { addBaseRange, addMarkerAndText } from '@/components/Amap/fenceUtils'
const formItemContext = Form.useInjectFormItemContext();
const lng = defineModel('lng')
const lat = defineModel('lat')
const props = defineProps<{
    baseObject?: Base
}>()
const visible = ref(false)
const emit = defineEmits(['ok', 'close'])
const lnglat = ref<{lng?:number, lat?:number}>({})
let map: AMap.Map

watch(() => props.baseObject, (newVal, oldVal) => {
    
})

const complete = (e: AMap.Map) => {
    map = e
    let base = props.baseObject
    if (base) {
        addMarkerAndText({
            map: map,
            lng: base.lng!,
            lat: base.lat!,
            text: base.name + '（基地）',
            imgUrl: location,
            width: 46,
            height: 62,
            extData: {
                className: 'plantBase',
                ...base
            }
        })

        if (base.scope && base.scope.length > 0) {
            let path = base.scope.map((obj) => {
                return new AMap.LngLat(obj.lng, obj.lat)
            })
            let polygon = addBaseRange(
                map,
                path,
                {
                    className: 'plantBase',
                    ...base
                }
            )
            polygon.on('click', (e) => {
                handleClick(e)
            })
        }

        map.setFitView()

    } 

    if(lng.value && lat.value){
        handleClick({
            lnglat: {
                lng: lng.value,
                lat: lat.value
            }
        })
        map.setFitView()
    }
}

const handleClick = (e: any) => {
    console.log(e)
    lnglat.value = e.lnglat
    let overlays = map.getAllOverlays()
    for (let item of overlays) {
        
        let extData = item.getExtData()
        if (extData.className == 'clickPoint') {
            map.remove(item);
        }
    }

    var icon = new AMap.Icon({
        size: new AMap.Size(23, 31), // 图标尺寸
        image: location, // Icon的图像
        imageSize: new AMap.Size(23, 31),
    });

    // 将 Icon 实例添加到 marker 上:
    var marker = new AMap.Marker({
        position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
        offset: new AMap.Pixel(0, 0), // 设置点标记偏移量
        anchor: 'bottom-center', // 设置锚点方位
        icon: icon, // 添加 Icon 实例
        extData: {className: 'clickPoint'}
    });

    map.add(marker);
}

const handleOk = () => {
    emit('ok', lnglat.value)
    lng.value = lnglat.value.lng
    lat.value = lnglat.value.lat
    formItemContext.onFieldChange()
    handleClose()

}
const handleClose = () => {
    lnglat.value = {}
    visible.value = false
}
</script>
<style scoped>
.point-div {
   
    height: 50px; line-height: 50px;
}

.point-text {
    color: #1677ff;
}

.select-btn {
    position: relative;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 11px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    height: 32px;
    cursor: pointer;
}
</style>